<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex 学习</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <h1>flex 布局盒子</h1>
  <div class="title">flex-direction</div>
  <!-- flex-direction 表示 flex item 从什么位置开始，如何排列 -->
  <div class="flex-direction-demo warp">
    <!-- row 表示 水平方向排列，从左到右  -->
    <div class="row">
      <div>row</div>
      <div></div>
      <div></div>
    </div>
    <!-- row-reverse 表示 水平方向排列，从右到左 -->
    <div class="row-reverse">
      <div>row-reverse</div>
      <div></div>
      <div></div>
    </div>
    <!-- column 表示 垂直方向排序，从上到下-->
    <div class="column">
      <div>reverse</div>
      <div></div>
      <div></div>
    </div>
    <!-- column-reverse 表示 垂直方向排序，从下到上-->
    <div class="column-reverse">
      <div>column-reverse</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <br>
  <!-- flex-wrap 表示 flex item 是否换行，如何换行 -->
  <div class="title">flex-wrap</div>
  <div class="flex-wrap-demo warp">
    <!-- nowrap 表示不换行 -->
    <div class="nowrap">
      <div>nowrap</div>
      <div></div>
      <div></div>
    </div>
    <!-- wrap 换行，第一行在上方 -->
    <div class="wrap">
      <div>wrap</div>
      <div></div>
      <div></div>
    </div>
    <!-- wrap-reverse 换行，第一行在下方 -->
    <div class="wrap-reverse">
      <div>wrap-reverse</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <br>
  <!-- flex-flow 等于 flex-direction + flex-wrap ，第一个值表示 flex item 从哪里开始，第二个值表示是否换行-->
  <div class="title">flex-flow</div>
  <div class="warp flex-flow-demo">
    <!-- nowrap 表示不换行 -->
    <div class="column-nowrap">
      <div>nowrap</div>
      <div></div>
      <div></div>
    </div>
    <!-- wrap 换行，第一行在上方 -->
    <div class="column-wrap">
      <div>wrap</div>
      <div></div>
      <div></div>
    </div>
    <!-- wrap-reverse 换行，第一行在下方 -->
    <div class="column-wrap-reverse">
      <div>wrap-reverse</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- justify-content 定义了项目在主轴上的对齐方式 -->
  <div class="title">justify-content</div>
  <div class="warp justify-content-demo">
    <!-- flex-start 左对齐-->
    <div class="flex-start">
      <div>flex-start</div>
      <div>flex-start</div>
    </div>
    <!-- flex-end 右对齐 -->
    <div class="flex-end">
      <div>flex-end</div>
      <div>flex-end</div>
    </div>
    <!-- center 居中 -->
    <div class="center">
      <div>center</div>
      <div>flex-center</div>
    </div>
    <!-- space-between 两端对齐，项目之间的间隔都相等 -->
    <div class="space-between">
      <div>space-between</div>
      <div>space-between</div>
    </div>
    <!-- space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 -->
    <div class="space-around">
      <div>space-around</div>
      <div>space-around</div>
    </div>
  </div>

  
  <!-- align-items 属性定义项目在交叉轴上如何对齐。 -->
  <div class="title">align-items</div>
  <div class="warp align-items-demo">
    <!-- flex-start 上边对齐-->
    <div class="flex-start">
      <div>flex-start</div>
      <div>flex-start</div>
    </div>
    <!-- flex-end 下边对齐 -->
    <div class="flex-end">
      <div>flex-end</div>
      <div>flex-end</div>
    </div>
    <!-- center 居中 -->
    <div class="center">
      <div>center</div>
      <div>center</div>
    </div>
    <!-- baseline 更具第一行字的中线 -->
    <div class="baseline">
      <div>baseline</div>
      <div>baseline</div>
    </div>
    <!-- stretch (默认) 如果没有设置高，则会撑满-->
    <div class="stretch">
      <div>height:auto</div>
      <div>height:60</div>
    </div>
  </div>
  <!-- align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。  -->
  <div class="title">align-content</div>
  <div class="warp align-content-demo">
    <!-- flex-start：与交叉轴的起点对齐-->
    <div class="flex-start">
      <div>flex-start</div>
      <div>flex-start</div>
      <div>flex-start</div>
      <div>flex-start</div>
    </div>
    <!-- flex-end：与交叉轴的终点对齐 -->
    <div class="flex-end">
      <div>flex-end</div>
      <div>flex-end</div>
      <div>flex-end</div>
      <div>flex-end</div>
    </div>
    <!-- center 与交叉轴的中点对齐 -->
    <div class="center">
      <div>center</div>
      <div>center</div>
      <div>center</div>
      <div>center</div>
    </div>
    <!-- space-between 与交叉轴两端对齐，轴线之间的间隔平均分布 -->
    <div class="space-between">
      <div>space-between</div>
      <div>space-between</div>
      <div>space-between</div>
      <div>space-between</div>
    </div>
    <!-- space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍-->
    <div class="space-around">
      <div>space-around</div>
      <div>space-around</div>
      <div>space-around</div>
      <div>space-around</div>
    </div>
    <!-- stretch 轴线占满整个交叉轴。 -->
    <div class="stretch">
      <div>stretch</div>
      <div>stretch</div>
      <div>stretch</div>
      <div>stretch</div>
    </div>

  </div>
  <!-- item 属性 -->
  <h1>item 属性</h1>
  <div class="title">order</div>
  <div class="warp item-list">
    <!-- flex-start：与交叉轴的起点对齐-->
    <div class="order">
      <div>空</div>
      <div>2</div>
      <div>4</div>
      <div>3</div>
      <div>1</div>
      <div>空2</div>
    </div>
  </div>
  <div class="title"> flex-grow </div>
  <div class="warp item-list">
    <!-- flex-start：与交叉轴的起点对齐-->
    <div class="flex-grow">
      <div>flex-grow:1 </div>
      <div>flex-grow:2 <img src="123" width="100" height="100" /></div>
      <div>flex-grow:1</div>
    </div>
  </div>
  <div class="title"> flex-shrink </div>
  <div class="warp item-list">
    <!-- flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。-->
    <div class="flex-shrink">
      <div>flex-shrink:1</div>
      <div>flex-shrink:1.5</div>
      <div>flex-shrink:1</div>
    </div>
  </div>
  <div class="title"> flex-basis </div>
  <div class="warp item-list">
    <!-- flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 -->
    <div class="flex-basis">
      <div>60px</div>
      <div>flex-basis:1</div>
      <div>20px</div>
    </div>
  </div>
  <div class="title"> flex </div>
  <div class="warp item-list">
    <!-- flex 属性是 flex-grow , flex-shrink  和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。 -->
    <div class="flex">
      <div>flex:1 1 100px</div>
      <div>flex:2 2 100px</div>
      <div>flex:0 0 100px</div>
    </div>
  </div>
  <div class="title">align-self</div>
  <div class="warp item-list">
    <div class="align-self">
      <div>center</div>
      <div>flex-end</div>
      <div>flex-start</div>
    </div>
  </div>
  

</body>
</html>